<template>
  <el-dialog title="新建题目" :visible.sync="dialogVisible">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="SectionID" prop="sid">
        <el-input type="text" v-model="ruleForm.sid" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="题干" prop="stem">
        <el-input type="textarea" :rows="3" v-model="ruleForm.stem" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="图片" prop="pic">
        <el-input type="text" v-model="ruleForm.pic" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="答案" prop="answer">
        <el-radio-group v-model="ruleForm.answer">
          <el-radio-button label="A"></el-radio-button>
          <el-radio-button label="B"></el-radio-button>
          <el-radio-button label="C"></el-radio-button>
          <el-radio-button label="D"></el-radio-button>
          <el-radio-button label="E"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="解析" prop="explain">
        <el-input type="textarea" :rows="3" v-model="ruleForm.explain" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="解析图片" prop="epic">
        <el-input type="text" v-model="ruleForm.epic" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="A" prop="a">
        <el-input type="text" v-model="sels.A" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="B" prop="b">
        <el-input type="text" v-model="sels.B" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="C" prop="c">
        <el-input type="text" v-model="sels.C" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="D" prop="d">
        <el-input type="text" v-model="sels.D" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="E" prop="e">
        <el-input type="text" v-model="sels.E" auto-complete="off"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {QuestionService} from '@/service/api'

export default {
  name: 'QuestionEdit',
  props: ['visible', 'sid', 'question'],
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data: function () {
    return {
      ruleForm: {
        stem: '',
        sid: this.sid
      },
      sels: {},
      rules: {
        stem: [
          {required: true, message: '请输入名称', trigger: 'change'}
        ],
        sid: [
          {required: true, message: '请输入试卷ID', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    submitForm: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }
        let question = {
          Stem: this.ruleForm.stem,
          Answer: this.ruleForm.answer,
          Explain: this.ruleForm.explain,
          Pic: this.ruleForm.pic,
          ExpPic: this.ruleForm.epic,
          Selections: this.sels
        }
        QuestionService.create(question, this.ruleForm.sid)
          .then(res => {
            if (res) {
              this.dialogVisible = false
              this.$message.success('创建成功')
              this.$emit('listPage')
              this.$refs[formName].resetFields()
              this.sels = {}
            }
          })
      })
    }
  }
}
</script>

<style scoped>

</style>
